<!DOCTYPE html>
<html>
<head>
    <title>message.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style type="text/css">
        p{margin:0 100px}
        button{width:100px;height:40px; border-radius:8px;}
    </style>

</head>

<body STYLE="background-color: #edf2fc">
<img style="margin-top: 50px;margin-left: 100px"alt="" src="../img/index.png">
<span style="font-size:40px;position:absolute;top:80px;font-family: Microsoft YaHei;color:red">文明单位注册页面</span>
<hr style="color: #1e468f;">
<div id="app">
    <span style="font-size:24px;text-align:center;margin-left: 300px;">带<span style="color:red"> * </span>为必填项</span>
</div>
<div id="messageView" style="margin-top: 10px;width:600px;margin-left: 15px;margin: auto;border: 5px solid #1e468f;padding-top: 15px;padding-left: 255px;">
    <el-form :inline="true" :model="messageForm" class="demo-form-inline" :rules="editFormRules" ref="messageForm">
        <el-form-item label="所属组织" prop="manage">
            <el-select v-model="messageForm.manage" placeholder="请选择">
                <el-option
                        v-for="item in org"
                        :key="item.id"
                        :label="item.manage"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="单位名称" prop="name">
            <el-input v-model="messageForm.name" placeholder="请输入单位名称" style="padding-right: 15px;"></el-input>
        </el-form-item><br>
        <el-form-item label="单位类别" prop="type">
            <el-select v-model="messageForm.type" placeholder="请选择">
                <el-option
                        v-for="item in types"
                        :key="item.id"
                        :label="item.type"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item><br>
        <el-form-item label="单位性质" prop="nature">
            <el-select v-model="messageForm.nature" placeholder="请选择">
                <el-option
                        v-for="item in natures"
                        :key="item.id"
                        :label="item.nature"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item><br>
        <el-form-item label="所属行业" prop="industry">
            <el-select v-model="messageForm.industry" placeholder="请选择">
                <el-option
                        v-for="item in industrys"
                        :key="item.id"
                        :label="item.industry"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item><br>
        <el-form-item label="申报等级" prop="grading">
            <el-select v-model="messageForm.grading" placeholder="请选择">
                <el-option
                        v-for="item in gradings"
                        :key="item.id"
                        :label="item.grading"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item><br>
        <el-form-item label="账　　户" prop="unituser">
            <el-input v-model="messageForm.unituser" @blur="selAccount" placeholder="请输入账户" style="padding-right: 15px;"></el-input>
        </el-form-item><br>
        <el-form-item label="密　　码" prop="password">
            <el-input type="password" v-model="messageForm.password" autocomplete="off" placeholder="请输入密码" style="padding-right: 15px;"></el-input>
        </el-form-item><br>
        <el-form-item label="确认密码" prop="repass">
            <el-input type="password" v-model="messageForm.repass" @blur="selPassword" autocomplete="off" placeholder="请输入确认密码" style="padding-right: 15px;"></el-input>
        </el-form-item><br>
        <el-form-item label="编制人数" prop="number">
            <el-input v-model="messageForm.number" placeholder="请输入编制人数" style="padding-right: 15px;"></el-input>
        </el-form-item><br>
        <el-form-item label="邮　　箱" prop="email">
            <el-input v-model="messageForm.email" placeholder="请输入邮箱" style="padding-right: 15px;"></el-input>
        </el-form-item><br>
        <el-form-item label="联  系  人"  prop="linkman">
            <el-input v-model="messageForm.linkman" placeholder="请输入联系人" style="padding-right: 15px;"></el-input>
        </el-form-item><br>
        <el-form-item label="联系电话" prop="linknum">
            <el-input v-model="messageForm.linknum" placeholder="请输入联系电话" style="padding-right: 15px;"></el-input>
        </el-form-item><br>
        <el-form-item label="单位地址" prop="address">
            <el-input v-model="messageForm.address" placeholder="请输入单位地址" style="padding-right: 15px;"></el-input>
        </el-form-item><br>
        <el-form-item label="单位介绍" prop="introduce">
            <el-input type="textarea" v-model="messageForm.introduce" :cols="24"></el-input>
        </el-form-item><br>
        <el-form-item>
            <el-button type="primary" @click.native="addSubmit('messageForm')" :loading="editLoading" style="margin-right: 130px;">提交</el-button>

            <el-button type="success" @click="resetForm('messageForm')">重置</el-button>

        </el-form-item>

    </el-form>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '带*为必填项'
        },

    });

    var messageView=new Vue({
        el:'#messageView',
        data: {
            editFormVisible: false,
            editLoading: false,

            messageForm:{
                // filepath:[],
                // imagepath:[]
            },
            options: [],
            /* tontrus: [], */
            sorts: [],
            qualitys: [],
            industrys: [],
            levels: [],
            editFormVisible: false,
            editLoading: false,
            goUrl:'',
            editFormRules: {
                manage:[
                    {required: true, message: '请选择主管单位', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请输入单位名称', trigger: 'blur' }
                ],
                type:[
                    {required: true, message: '请选择单位类别', trigger: 'change' }
                ],
                nature:[
                    {required: true, message: '请选择单位性质', trigger: 'change' }
                ],
                industry:[
                    {required: true, message: '请选择所属行业', trigger: 'change' }
                ],
                grading:[
                    {required: true, message: '请选择申报等级', trigger: 'change' }
                ],
                unituser: [
                    { required: true, message: '请输入账户', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                repass: [
                    { required: true, message: '请确认密码', trigger: 'blur' }
                ],
                number: [
                    { required: true, message: '请输入单位人数', trigger: 'blur' },
                ],

                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱格式' }
                ],

                linkman: [
                    { required: true, message: '请输入联系人', trigger: 'blur' },
                ],
                linknum: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { min: 11, message: '请输入不少于11个数字', trigger: 'blur' },
                    { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的联系电话' }
                ],
                address: [
                    { required: true, message: '请输入单位地址', trigger: 'blur' },
                ],
                introduce: [
                    { required: true, message: '请输入单位介绍', trigger: 'blur' },
                ],
            },
        },
        created:function(){
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            var end =this.currentPage*this.pageSize+1;
            axios.post('/regist/sellist',{'start':start,'end':end}).then(function(response){
                self.org = response.data.org;
                /* self.tontrus = response.data.tontrus; */
                self.types = response.data.types;
                self.natures = response.data.natures;
                self.industrys=response.data.industrys;
                self.gradings=response.data.gradings;

            })
        },
        methods:{
            //表格重新加载数据
            loadingData:function() {
                var _self = this;
                _self.loading = true;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.currentPage*this.pageSize+1;
                var searchForm={'start':start,'end':end,'id':this.searchForm.id,'name':this.searchForm.name};
                axios.post('/regist/sellist',searchForm).then(function(response){
                    console.log(response.data);
                    _self.options = response.data.options;
                    /*  _self.tontrus = response.data.tontrus; */
                    _self.sorts = response.data.sorts;
                    _self.qualitys = response.data.qualitys;
                    _self.industrys = response.data.industrys;
                    _self.levels = response.data.levels;
                })
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },
            selPassword:function(){
                var password=messageView.messageForm.password;
                var repass=messageView.messageForm.repass;
                if (password!=repass) {
                    this.$message.error('密码不一致');
                }
            },
            // success:function(res, file) {
            //     this.messageForm.filepath.push(file.response);
            // },
            // handleAvatarSuccess:function(res, file) {
            //     var a=file.response;
            //     // alert(a)
            //     this.messageForm.imagepath.push(a);
            //     //alert(JSON.stringify(this.form.organizationid))  ;
            // },
            // //文件超出限制个数时
            // handleExceed:function(files, fileList) {
            //     this.$message.warning('当前限制选择 1 个文件');
            // },
            // //移除文件时
            // beforeRemove:function(file, fileList) {
            //     return this.$confirm('确定移除此文件吗?');
            // },
            // beforeRemoveImg:function(file, fileList) {
            //     return this.$confirm('确定移除此文件吗?');
            // },

            //判断账号是否重复
            selAccount:function(){
                var account=messageView.messageForm.account;
                var url='/message/selAccount';
                var check={'account':account};
                var self=this;
                axios.post(url,check).then(function(response){
                    /*	size 状态
                        0 未注册 不存在于数据库中
                        大于等于1 已注册 该账号不可用*/
                    if(response.data.size==0){
                        self.$message({
                            message: '账号可以添加',
                            type: 'success'
                        });
                    }else{
                        if(response.data.size==1){
                            self.messageForm.account='';
                            self.$message({
                                message: '账号已经存在',
                                type: 'warning'
                            });
                        }
                    }
                })
            },

            //保存点击事件
            addSubmit:function(messageForm){
                this.$refs[messageForm].validate((valid) => {
                    if (valid) {
                        var _self = this;
                        _self.loading = true;
                        var formData =this.messageForm;
                        var goUrl="/regist/add";
                        //alert(JSON.stringify(formData));
                        axios.post(goUrl,formData).then(function(response){
                            console.log(response.data);
                            self.total=response.data.total;
                        });
                        this.$alert('信息已提交', '提交', {
                            confirmButtonText: '确定',
                            callback: function() {
                                window.location.href="/regist/done";
                            }
                        });
                        console.info(this.messageForm);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //重置表单
            resetForm(messageForm){
                this.$refs[messageForm].resetFields();
            }
        },

    });
</script>
</body>
</html>

